<template>
    <div>
        <!-- 切换工具 -->
        <div class="biaoti">
            <span class="biaotiText" :class="{ active: activeTitle === 'TOPO' }" @click="biantiClick('TOPO')"> TOPO </span>
            <span> | </span>
            <span class="biaotiText" :class="{ active: activeTitle === 'ModelEditing' }"
                @click="biantiClick('ModelEditing')"> Model Editing </span>
        </div>

        <div class="component">
            <Topo v-if="activeTitle === 'TOPO'" class="component_topo"></Topo>
            <MEditing v-if="activeTitle === 'ModelEditing'" class="component_MEditing"></MEditing>
        </div>
    </div>
</template>
<script setup>
import { defineComponent, onMounted, ref } from "vue"
import Topo from "../../components/Topo/topo.vue"
import MEditing from "../../components/ModelEditing/modelediting.vue"
const activeTitle = ref('TOPO'); // 新增一个响应式数据来跟踪活动标题

onMounted(() => {

})
function biantiClick(title) {
    activeTitle.value = title;
}
</script>

<style  scoped>
.biaoti {
    width: 200px;
    height: 50px;
    margin: 25px auto;
    line-height: 50px;
    cursor: pointer;
}

.biaotiText {
    font-weight: 700;
}

.biaotiText.active {
    font-size: 18px;
    color: rgb(3, 209, 209);
}

/* .biaotiText:hover {
    color: aqua;
} */

/* 组件最高层盒子 */
.component {
    position: relative;
    width: 80vw;
    height: 80vh;
    background-color: pink;
    margin: 25px auto;
}

.component_topo,
.component_MEditing {
    position: absolute;
}

/* 点击标题变色 */</style>